<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css画三角形</title>

</head>
<body>
    <div class="app"></div>
    <!-- 实现的原理：设置边框，宽高都设置为0，取想要的三角形，就把相对应的边框颜色改为有颜色的，不想要的三角形改成透明色-->

    <style>
        .app{
            /*width: 100px;*/
            width: 0;
            /*height: 100px;*/
            height: 0;
            border-top: 50px solid red;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</body>
</html>
